<template>
  <div id="categorySideBar">
    <h2 class="sideTitle">目录分类</h2>
    <div class="categoryList">
      <div
        v-for="(item, index) in categoryTabs"
        :key="index"
        class="categoryItem"
        :class="{ active: activeKey === item.key }"
        @click="handleCategoryClick(item.key)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { ITabs } from "@/consts";
import { secondTabsMock } from "@/mock";

const activeKey = ref("all");
const categoryTabs = ref<ITabs[]>(secondTabsMock);

const emit = defineEmits(["onCategoryChange"]);

const handleCategoryClick = (key: string) => {
  activeKey.value = key;
  emit("onCategoryChange", key);
};
</script>

<style scoped>
#categorySideBar {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  background: white;
  width: 200px;
  border-radius: 14px;
}

.sideTitle {
  margin: 18px 0px 18px 24px;
}

.categoryList {
  width: 100%;
}

.categoryItem {
  margin: 5px 24px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 未选中状态 */
.categoryItem {
  color: initial;
  background: transparent;
}

/* 悬浮状态 */
.categoryItem:hover {
  background: #f9fafb;
  color: initial;
}

/* 选中状态 */
.categoryItem.active {
  color: #c33c31;
  background: #fcf5f5;
  font-weight: 500;
}
</style>
